<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-计算数据</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结
            a. 尤雨溪在直播中强调，el 指的是 id 容器以内的内容

     -->
    <div id="demo" :chenwei="num">
        <div id="box">{{ num }}</div>
        <h3>感受生命周期函数 -- {{ num }}</h3>
        <button @click="addNum">点击增加</button>
        <button @click="destroy">点击销毁</button>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                num: 0
            },
            methods: {
                addNum() {
                    // console.log(100)
                    this.num++
                },
                destroy() {
                    this.$destroy()
                }
            },
            // 模板的意思
            // template: `
            //     <div>
            //         <div id="box">{{ num }}</div>
            //         <h3>感受生命周期函数 -- {{ num }}</h3>
            //         <button @click="addNum">点击增加</button>
            //         <button @click="destroy">点击销毁</button>
            //     </div>
            // `,
            // 第1个生命周期的函数，在数据创建之前
            beforeCreate() {
                // 生命周期函数和事件中的方法会先挂载
                // this.addNum()   调用不了
                // console.log(this)
                // debugger
            },
            // 第2个生命周期函数
            created() {
                // this.addNum()
                // console.log(this)
                // debugger

                // 非常常用，在未开始解析dom的时候，可以处理一些异步的操作
                // 减少用户等待也的时间
            },

            // 第3个生命周期函数，在页面渲染之前
            beforeMount() {
                // console.log(document.querySelector('#box').innerHTML)
                // console.log(this)
                // document.querySelector('#box').innerHTML = 'hello chenwei'
                // debugger
            },
            // 第4个生命周期函数，在页面初次加载完毕之后执行 1 次
            // 可以操作dom了
            mounted() {
                // console.log(this)
                // console.log(document.querySelector('#box').innerHTML)
                // this.addNum()
                // debugger
            },

            // 第5个生命周期函数，在vm实例更新之前
            beforeUpdate() {
                // console.log(100)
                // console.log(this)
                // debugger
            },
            // 第6个生命周期函数, 在页面重新渲染之后
            updated() {
                // 监视的是任何单方面的数据更新
                // console.log(this)
                // debugger
            },

            // 销毁的是数据和事件作用在页面中的能力，其实就是卸载页面
            // 第7个生命周期函数, 在数据销毁之前
            beforeDestroy() {
                // this.addNum()
                // 可用不代表能操作，最多能处理vm
                // console.log(this)
                // debugger
            },
            // 第8个生命周期函数， 在数据销毁之后
            destroyed() {
                this.addNum()
                console.log(this)
            }
        })

        // 图示中的虚线就证明这句话不是马上调用的
        // vm.$mount('#demo')

    </script>
</body>
</html>